<template>
  <div class="container">
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      left-arrow
      style="background-color: #f4b4b6"
      @click-left="onClickLeft"
    />
    <div class="content">
      <div class="title">{{articleText.title}}</div>
      <div class="author">作者：{{articleText.author.nickname}}</div>
      <div class="article_content">
        <pre>{{articleText.content}}</pre>
      </div>
    </div>
  </div>

</template>

<script>
import { Toast } from 'vant';
import Article from "../js/Article";

export default {
  data(){
    return{
      id:this.$route.query.id,
      articleText:{
        author:{
          nickname:""
        }
      },
    }
  },
  mounted(){
    this.getArticleDetail()
  },
  methods:{
    // 获取文章详情
    getArticleDetail(){
      Article.getArticleDetail(this.id).then(res => {
        if(res.data.code === 0){
          this.articleText = res.data.data
        }else{
          Toast.fail('未知错误');
        }
      })
    },
    // 返回上一页
    onClickLeft(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scope lang="less">
  .container{
    
    .content{
      margin-top: 5%;
      .title{
        font-size: 1.5rem;
        font-weight: 500;
        text-align: center;
      }
      .author{
        text-align: center;
      }.article_content{
        text-align: center;
      }
    }
  }
   /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }

  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
  
</style>